<template>
	<view class="tree-select">
		<view class="component-item">
			<text class="component-item-label">ifun-data-select</text>
			<view class="component-item-content" @click="()=>treeSelectShow=true">
				<text
					class="value">{{showLabel||'请选择'}}</text>
				<text class="select-count" v-if="treeSelectInfo.length>1">+{{treeSelectInfo.length-1}}</text>
			</view>

			<ifun-tree-select multiple clearable @ok="handleTreeDataPicker" :visible.sync="treeSelectShow"
				:data="treeData" title="树级选择"></ifun-tree-select>
		</view>
	</view>
</template>

<script>
	export default {
		name: "tree-select",
		data() {
			return {
				treeSelectShow: false,
				treeSelectInfo: {},
				treeData: [{
						value: '节点1',
						label: '节点1',
						children: []
					},
					{
						value: '节点2',
						label: '节点2',
						children: [{
								value: '节点21',
								label: '节点21',
							},
							{
								value: '节点22',
								label: '节点22',
								children: [{
										value: '节点221',
										label: '节点221',
									},
									{
										value: '节点222',
										label: '节点222',
									}
								]
							}
						]
					}
				]
			};
		},
		computed:{
			showLabel(){
				if(Array.isArray(this.treeSelectInfo)){
					let info = this.treeSelectInfo[0]||{};
					
					return info.label
				}else{
					return this.treeSelectInfo.label
				}
			}
		},
		methods: {
			handleTreeDataPicker(info, arr) {
				console.log(info, arr)

				this.treeSelectInfo = info
			}
		}
	}
</script>

<style lang="less" scoped>
	.tree-select {
		.select-count {
			background: #108EE9;
			border-radius: 3px;
			color: #fff;
			padding: 0 3px;
			font-size: 12px;
			margin-left: 3px;
		}
	}
</style>